<template>
    <div class="wrap">
        <header class="detail-header fixed-header">
            <a class="icona" href="javascript:history.go(-1)">
                <van-icon name="arrow-left" size="1.5rem" color="#666666" />
            </a>

            <router-link class="right" to="/cart">
                <van-icon name="shopping-cart-o" size="1.2rem" color="#666666" />
            </router-link>
        </header>
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="#FC605A">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <section class="detail">
            <dl class="jiage">
                <dt>
                    <h3>2015冬季新款韩版加厚中长款小鹿毛呢大衣女系带加厚羊毛呢外套</h3>
                    <div class="collect">
                        <img src="../../assets/images/detail-heart-hei.png">
                        <p>收藏</p>
                    </div>
                </dt>
                <dd>
                    <b>￥28.99</b>
                    <del>￥139</del>
                    <input type="button" value="￥10.00" readonly="">
                    <small>+356积分</small>
                </dd>
            </dl>

            <div class="chose">
                <ul>
                    <h3>颜色</h3>
                    <li class="chose-active">
                        黑色
                    </li>
                    <li>
                        粉色
                    </li>
                    <li>
                        灰色
                    </li>
                    <li>
                        红色
                    </li>
                </ul>
                <ul>
                    <h3>尺寸</h3>
                    <li>
                        L
                    </li>
                    <li>
                        XL
                    </li>
                    <li>
                        XXL
                    </li>
                </ul>
            </div>

            <a href="#" class="seven">
                <b>7</b>天无理由退换货
                <span id="sss"></span>
            </a>

            <ul class="same">
                <a href="#">
					<span>
						同类推荐
					</span>
                    <li class="one">
                        <img src="../../assets/images/detail-pp01.png">
                        <p>￥188.00</p>
                    </li>
                    <li>
                        <img src="../../assets/images/detail-pp02.png">
                        <p>￥188.00</p>
                    </li>
                    <li>
                        <img src="../../assets/images/detail-pp03.png">
                        <p>￥188.00</p>
                    </li>
                    <li>
                        <img src="../../assets/images/detail-pp04.png">
                        <p>￥188.00</p>
                    </li>
                </a>
            </ul>

            <article class="detail-article">
                <nav>
                    <span>
						商品详情
					</span>
                </nav>

                <section class="description">
                    <p>
                        <img src="http://172.16.40.70/shop/images/detail-ban04.png">
                        我是描述啊我是描述啊我是描述啊我是描述啊我是描述啊我是描述啊
                    </p>
                    <p>
                        <img src="../../assets/images/detail-pp04.png">
                        我是描述啊我是描述啊我是描述啊我是描述啊我是描述啊我是描述啊
                    </p>
                </section>

            </article>
        </section>

        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
            <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
            <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
        </van-goods-action>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				images: [
					'http://172.16.40.70/shop/images/detail-ban01.png',
					'http://172.16.40.70/shop/images/detail-ban02.png',
					'http://172.16.40.70/shop/images/detail-ban03.png',
					'http://172.16.40.70/shop/images/detail-ban04.png',
				],
				active: 'home'
			}
		},
        methods:{
            onClickIcon() {
                this.$toast('点击图标');
            },
            onClickButton() {
                this.$toast('点击图标');
            }
        }
	}
</script>
<style scoped>
    .wrap{padding-bottom: 3.5rem;}
    .banner{margin-top:0rem;}
    .banner img { width:100%;}
    header{position: absolute;}
    .detail-header{ width: 90%; padding: 3% 5%; z-index: 2;overflow: hidden;
        -webkit-transition:background-color 0.8s ;
        -moz-transition: background-color 0.8s;
        -ms-transition: background-color 0.8s;
        -o-transition: background-color 0.8s;
        transition:background-color 0.8s ;
        transition: background-color 0.8s; }
    .change{background-color: #fff ; box-shadow: 0 1px 0 #c8c8c8; }
    .change a{background-color: rgba(0,0,0,0); }
    .detail-header a{display: block; position: relative; float: left; width: 10%; height: 0; padding:5% 0; border-radius: 50%; background-color: rgba(255,255,255,0.7); overflow: hidden;}
    .detail-header .right{ float: right;  }
    .detail-header a i{ position: absolute; left:20%; top:0.6rem;}
    .detail-header a.icona i{ left:13%; top: 0.4rem;}

    .detail{ width: 100%; font-size:1rem;}
    .detail .jiage{ width: 100%; padding: 3% 0;background-color: #fff; overflow: hidden; margin-top:0.1rem; margin-bottom:0;}
    .detail .jiage dt{ width: 100%; overflow: hidden;}
    .detail .jiage dt h3{float: left; width: 70%; margin: 0; padding: 0 5%; font-weight: normal; font-size: 1.1rem; color: #333; text-align: justify;}
    .detail .jiage dt .collect{float: left; width: 20%; text-align: center; border-left: solid 1px #c8c8c8; margin-left: -1px;}
    .detail .jiage dt .collect img{ width: 30%;}
    .detail .jiage dt .collect p{ color: #666; font-size: 0.8rem; margin: 0}

    .detail .jiage dd{ clear: both; width: 90%; padding: 2% 5%; margin-left:0;}
    .detail .jiage dd{ clear: both; width: 90%; padding: 2% 5%;}
    .detail .jiage dd b{font-size: 1.3rem; color: #FC605A; font-weight: normal;}
    .detail .jiage .detail .jiage dd{ clear: both; width: 90%; padding: 2% 5%;}
    .detail .jiage dd del{ color: #999; font-size: 1rem; margin: 0 2%;}
    .detail .jiage dd{ clear: both; width: 90%; padding: 2% 5%;}
    .detail .jiage dd small{color: #999; font-size: 0.9rem; margin: 0 2%;}
    .detail .jiage dd{ clear: both; width: 90%; padding: 2% 5%;}
    .detail .jiage dd input[type="button"]{ font-size: 0.5rem; border: none; background-color: #333; color: #fff; border-radius: 0.2em; padding: 1% 3%; padding-left: 8%; background-image: url(../../assets/images/detail-you.png); background-repeat: no-repeat; background-size: 16%; background-position: 16%;}

    .detail .chose{ width: 100%; margin-top:0.3rem ;}
    .detail .chose ul{ width: 94%; padding: 2% 3%; border-bottom: solid 1px #c8c8c8; background-color: #fff; overflow: hidden;}
    .detail .chose ul:last-child{ border: none;}
    .detail .chose ul h3{ font-size: 1rem; color: #666; font-weight: normal; margin-bottom: 2%; margin-top:0;}
    .detail .chose ul li{ width: 15%; padding: 1% 0; font-size: 0.8rem; text-align: center; border: solid 1px #c8c8c8; float: left; margin: 2% 2%; border-radius: 0.2em;}
    .detail .chose ul .chose-active{ border: solid 1px rgba(0,0,0,0); background-image: url(../../assets/images/detail-icon03.png); background-repeat: no-repeat; background-size: 100% 100%; }
    .detail .seven{ width: 100%; display: block; background-color: #fff; padding: 3% 5%; margin-top:0.3rem ; color: #666; font-size: 0.8rem; background-image: url(../../assets/images/right.png); background-repeat: no-repeat; background-size: 2%; background-position: 85%;}
    .detail .seven b{  color: #FC605A; font-weight: normal;}
    .detail .same { overflow: hidden; width: 100%; background-color: #fff;margin-top:0.3rem ; padding-bottom: 3%;}
    .detail .same a{ width: 100%; display: block;}
    .detail .same span{width: 100%; display: block; border-bottom: solid 1px #c8c8c8; background-color: #fff; padding: 3% 3%;  margin-bottom: 2%; color: #666;font-size: 1rem; background-image: url(../../assets/images/more.png); background-repeat: no-repeat; background-size:6%; background-position: 90%;}
    .detail .same li{ text-align: center; float: left; width: 23%; margin-right: 1%;  }
    .detail .same .one{ margin-left: 2%;}
    .detail .same li:last-child{ margin-right: 2%;}
    .detail .same li img{ width: 96%; min-height:6em; max-height: 7em;}
    .detail .same li p{  color: #FC605A; font-size: 0.8rem; margin-top: 2%;}

    .detail .detail-article{ width: 100%; margin-top:0.3rem ; overflow: hidden; background-color: #fff}
    .detail .detail-article nav{ width: 100%;}
    .detail .detail-article span{width: 100%; display: block; border-bottom: solid 1px #c8c8c8; background-color: #fff; padding: 3% 3%;  margin-bottom: 2%; color: #666;font-size: 1rem;}
    .detail .description{ padding: 0 0.5rem 0.5rem;}
    .detail .description img{ max-width: 100%;}

</style>
